<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/swiper.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base.css">
    <link rel="stylesheet" type="text/css" href="__STATIC__/css-wap/style.css">
    <script src="__STATIC__/js/swiper.min.js"></script>
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>{$type_name}</title>
    <script>
        $(function(){
            $(".down img").click(
                    function(){
                        $('.box').css('height',window.screen.availHeight+'px');
                        var str = $(this).prop('src'),
                                header = $('.header').height(),
                                banner = $('#banner_pic').height(),
                                tablist = $('.tablist').height(),
                                zhi = str.substring(str.length-8,str.length);
                        if (zhi == "down.png"){
                            $(this).prop("src","__STATIC__/img/top3.png");
                            $('.box').css({'display':'block','top':header+tablist+banner+2});
                            $('body').css('overflow-y','hidden');
                        }else{
                            $(this).prop("src","__STATIC__/img/down.png");
                            $('.box').css('display','none');
                            $('.sonList').each(function (i,o) {
                                $(o).css('display','none');
                            });
                            $('body').css('overflow-y','');
                        }
                        $(".type").toggle();
//                        $(".tablist ul li").removeClass("cur");
                        $(".board").css({height:"h"});
                    }
            )
        })
    </script>
    <style>
        .box{
            position:absolute;
            width:100%;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background:#000;
            opacity:0.5;
            display: none;
        }
        .swiper-wrapper #cur{
            border:1px solid red;
        }
        .tabcon .sonList{
            display: none;
        }
        .tabcon .sonList:first-child{
            display:block;
        }
    </style>
</head>
{include file="public/href" /}
<body>
<div class="wrap-shoe">
    <div class="header">
        <p style="font-size: 16px;">{$type_name}</p>
        <img src="__STATIC__/img_user/back.png" class="back" onclick="javascript:back_url();">
    </div>
    <img src="/{$banner.picUrl}" style="width: 100%;display: block;">
    <div class="swiper-container">
        <div class="swiper-wrapper">
            {volist name="banner" id="v"}
            <div class="swiper-slide" id="banner_pic">
                <a {if condition="$v.skip_type eq 'url'"} href="{$v.linkUrl}" {else/} {if condition="$v.skip_type eq 'shop'"} href="javascript:jump_shop({$v.linkUrl});" {else/} href="javascript:jump_goods_details({$v.linkUrl});" {/if}{/if}>
                <img src="/{$v.picUrl}" style="max-height:200px"  onerror=this.src="/static/mobile/img/empty_img.png"  >
                </a>
            </div>
            {/volist}
        </div>
        <div class="swiper-pagination"></div>
        <script>
            var swiper = new Swiper('.swiper-container', {
                pagination: '.swiper-pagination',
                paginationClickable: true,
                spaceBetween: 30,
                centeredSlides: true,
                autoplay: 2500,
                autoplayDisableOnInteraction: false
            });
        </script>
    </div>
    <div class="tab">
        <div class="tablist">
            <ul>
                {volist name="type" id='v' length='3'}
                <li {if condition="in_array($v.id,$parentId)"} class="cur" {/if} ><span><a href="javascript:display_son({$v.id});">{$v.title}</a></span></li>
                {/volist}
            </ul>
            <div class="down">
                <img src="__STATIC__/img_user/down.png" id="style_img" >
            </div>

        </div>
        <div class="tabcon">
            <div class="cur">
                {volist name='type' id='item'}
                <div class="swiper-container sonList" id="show_{$item.id}" style="display: none;" >
                    <div class="swiper-wrapper">
                        {volist name='item.classify' id='v'}
                        <div  style="width: auto;padding:0 1%;margin: 0 1%;overflow: hidden;white-space: nowrap" {if condition = "input('son_id') eq $v.id" } class="swiper-slide cur" {else/} class="swiper-slide" {/if} >
                            <a href="?type_id={:input('type_id')}&son_id={$v.id}">{$v.title}</a>
                        </div>
                        {/volist}
                    </div>
                </div>
                {/volist}
            <input type="hidden" value="{:input('type_id')}" id="type_id">
            <input type="hidden" value="{:input('son_id')}" id="son_id">
                <script>
                    var swiper = new Swiper('.tabcon .swiper-container', {
                        slidesPerView: 4.5,
                        paginationClickable: true,
                        spaceBetween: 0,
//                        freeMode: true
                    });
                </script>
                <ul class="list_group" id="list">
                    <!--内容容器-->
                </ul>
            </div>
            <div></div>
            <div></div>
        </div>
        <div class="board"></div>
    </div>

</div>
<!--<div class="box" onclick="close_box()"></div>-->
{include file="public/src" /}
<script>
    function close_box(){
        $("#style_img").prop("src","__STATIC__/img/down.png");
        $('.box').css('display','none');
        $('body').css('overflow-y','');
        $(".type").toggle();
    }
    
    
    function back_url() {
       var url = sessionStorage.getItem('market_cate');
        window.location.href=url;
    }
    function display_son(id){
        var str = $(this).prop('src'),
        header = $('.header').height(),
        banner = $('#banner_pic').height(),
        typeH = $('.type').height(),
        tablist = $('.tablist').height();
        $("#style_img").prop("src","__STATIC__/img/down.png");
        $('body').css('overflow-y','');
        $(".type").css('display','none');
        $('#show_'+id).toggle().siblings('.swiper-container').css('display','none');
        if ($('#show_'+id).css('display') == 'block'){
            $('.box').css({'display':'block','top':header+tablist+typeH+banner+15});
        }else {
            $('.box').css({'display':'none'});
        }
    }
    //layer流加载
    layui.use('flow', function() {
        var $ = layui.jquery;
        var flow = layui.flow;
        flow.load({
            elem: '#list' //流加载容器
            ,isAuto:true
            ,isLazyimg:true
            ,done: function(page, next){ //执行下一页的回调
                var lis = [];
                var type_id = $('#type_id').val();
                var son_id = $('#son_id').val();
                $.ajax({
                    url:"{:url('mobile/user_action/market_category')}",
                    dataType:'json',
                    type:'post',
                    data:{'page':page,'type_id':type_id,'son_id':son_id},
                    success:function(t){
                        layui.each(t.data, function(index, item){
                            var url = "{:url('mobile/user_category/goods_details')}?goods_id="+item.id;
                            lis.push('<li><a href="'+url+'"><div class="pic"><img src="/'+item.thumb_img+'" onerror=this.src="/static/mobile/img/empty_img.png"  style="height:150px;">' +
                                    '</div><h4 class="title">'+item.title+'</h4>' +
                                    '<div class="price">&yen;'+item.price+'<span class="sale_num">销量 '+item.sale_number+'</span></div></a></li>');
//                                    '</div><div class="qianbi">' +
//                                    '<span>周周币</span><img src="__STATIC__/img_user/sy-qianbi.png">' +
//                                    '<font class="scale">'+item.rebate_percentage+'%</font></div></a></li>');
                        });
                        next(lis.join(''), page < t.pages);
                    }
                })
            }
        });
    });
</script>
</body>
</html>